'use client'

import { useState, useEffect } from 'react'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'
import { useToast } from '@/hooks/use-toast'

export default function UserProfilePage() {
  const { toast } = useToast()
  const [stats, setStats] = useState({
    ai_count: 0,
    ai_count_limit: 0,
    copy_count: 0,
    copy_count_limit: 0,
    script_count: 0,
    script_count_limit: 0,
    topic_count: 0,
    topic_count_limit: 0,
    voice_count: 0,
    voice_count_limit: 0,
    subtitle_count: 0,
    subtitle_count_limit: 0
  })

  useEffect(() => {
    const fetchUserStats = async () => {
      try {
        const response = await fetch('/api/auth/me', {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token')}`
          }
        })
        const user = await response.json()
        console.log(111)
        setStats({
          ai_count: user.ai_count,
          ai_count_limit: user.ai_count_limit,
          copy_count: user.copy_count,
          copy_count_limit: user.copy_count_limit,
          script_count: user.script_count,
          script_count_limit: user.script_count_limit,
          topic_count: user.topic_count,
          topic_count_limit: user.topic_count_limit,
          voice_count: user.voice_count,
          voice_count_limit: user.voice_count_limit,
          subtitle_count: user.subtitle_count,
          subtitle_count_limit: user.subtitle_count_limit
        })
      } catch (error) {
        console.error('Failed to fetch user stats:', error)
      }
    }

    fetchUserStats()
  }, [])


  return (
    <div className="container mx-auto py-8 px-4">
       {/* Usage Statistics */}
       <Card>
        <CardHeader>
          <CardTitle>Usage Statistics</CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-2 md:grid-cols-5 gap-4">
          <div className="text-center">
            <div className="text-2xl font-bold">{stats.topic_count}</div>
            <div className="text-sm text-muted-foreground">Topics</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold">{stats.copy_count}</div>
            <div className="text-sm text-muted-foreground">Copywrites</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold">{stats.ai_count}</div>
            <div className="text-sm text-muted-foreground">AI Usage</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold">{stats.voice_count}</div>
            <div className="text-sm text-muted-foreground">TTS Usage</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold">{stats.subtitle_count}</div>
            <div className="text-sm text-muted-foreground">Subtitles</div>
          </div>
        </CardContent>
      </Card>

      <Separator className="my-8" />

    </div>
  )
}
